<template>
  <li class="ranklist" :style="{ background: rankColor.b }">
    <Loading v-if="!load"></Loading>
    <template v-else>
      <span class="update">{{ updateFrequency }}</span>
      <div class="left">
        <h1 :style="{ color: rankColor.c }">{{ item.name }}</h1>
        <div class="image">
          <img
            v-for="item in songList"
            :key="item.id"
            :src="item.al.picUrl | imgURL(246)"
          />
        </div>
      </div>
      <div class="right">
        <ul>
          <li v-for="(item, index) in songList" :key="item.id">
            <div class="msg">
              <span>{{ index + 1 }}. {{ item.al.name }} - </span>
              <b v-for="item1 in item.ar" :key="item1.id">{{ item1.name }}</b>
            </div>
            <div class="state">新</div>
          </li>
        </ul>
      </div>
    </template>
  </li>
</template>

<script>
import Loading from "@/components/Loading.vue";
export default {
  props: ["item", "updateFrequency", "rankColor"],
  components: {
    Loading,
  },
  data: function () {
    return {
      songList: [],
      load: false,
    };
  },
  computed: {},
  created: function () {
    this.axios
      .get(`https://apis.netstart.cn/music/playlist/detail?id=${this.item.id}`)
      .then((res) => {
        this.songList = res.data.playlist.tracks.slice(0, 3);
        this.load = true;
      });
  },
};
</script>

<style lang="less" scoped>
.ranklist {
  display: flex;
  width: 100%;
  border-radius: 10px;
  background-color: skyblue;
  margin: 10px 0;
  padding: 15px 0px 10px 0px;
  position: relative;
  .update {
    position: absolute;
    right: 3px;
    top: 3px;
    font-size: 12px;
    color: #ababab;
    transform: scale(0.8);
  }
  .left {
    width: 90px;
    text-align: center;
    position: relative;
    h1 {
      font-size: 18px;
      font-weight: bold;
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 20px;
      height: 20px;
      background-image: url("../assets/play.png");
      background-size: cover;
      z-index: 4;
      left: 35px;
      top: 46px;
      opacity: 0.8;
    }
    img {
      width: 55px;
      vertical-align: middle;
      position: absolute;
      left: 17px;
      top: 30px;
      border-radius: 10px;
      z-index: 3;
      &:nth-child(2) {
        transform-origin: right bottom;
        transform: scale(0.8) translateX(10px);
        z-index: 2;
        opacity: 0.6;
      }
      &:nth-child(3) {
        transform-origin: right bottom;
        transform: scale(0.6) translateX(25px);
        z-index: 1;
        opacity: 0.4;
      }
    }
  }
  .right {
    flex: 1;
    font-size: 13px;
    line-height: 30px;
    padding-left: 10px;
    li {
      display: flex;
      justify-content: space-between;
      .state {
        font-size: 12px;
        margin-right: 10px;
        color: green;
      }
      .msg {
        width: 80%;
        padding-left: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        b {
          font-weight: normal;
          color: #92878b;
          &::after {
            content: "/";
          }
          &:last-of-type {
            &::after {
              content: "";
            }
          }
        }
      }
    }
  }
}
</style>